{% extends 'base.html' %}
{% load static %}
{% block title %}
    个人中心
{% endblock %}
{% block content %}
	<section class="main-content">
      <div class="container-xl">
        <div class="row justify-content-center">
          <div class="col-lg-8">
            <div class="padding-30 rounded bordered bg-white mb-4">
              <div class="d-flex align-items-center mb-4">
                <img src="/media/{{ user_head }}" class="rounded-circle me-4"
                  style="width:100px;height:100px;object-fit:cover;" alt="用户头像">
                <div>
                  <h3 class="mb-1">用户名：{{ name }}</h3>
                  <p class="mb-1 text-muted">邮箱：{{ email }}</p>
                  <p class="mb-1">年龄：{{ age }}</p>
                  <p class="mb-1">性别：男</p>
                  <p class="mb-1">手机号码：{{ phone_num }}</p>
                  <p class="mb-1">地址：{{ address }}</p>
                  <p class="mb-0 text-muted">注册时间：{{ register_time }}</p>
                </div>
                <div class="ms-auto">
                  <a href="/user/edit/" class="btn btn-default  ">编辑资料</a>
                </div>
              </div>
              <div class="row text-center mb-4">
                <div class="col-4">
                  <h5 class="mb-0">{{ all_blog_count }}</h5>
                  <small class="text-muted">文章</small>
                </div>
                <div class="col-4">
                  <h5 class="mb-0">{{ all_blog_comment }}</h5>
                  <small class="text-muted">评论</small>
                </div>
                <div class="col-4">
                  <h5 class="mb-0">{{ all_blog_thumbUp }}</h5>
                  <small class="text-muted">获赞</small>
                </div>
              </div>
            </div>
            <div class="padding-30 rounded bordered bg-white">
              <div class="section-header mb-3">
                <h3 class="section-title">我的文章</h3>
                <img src="{% static 'images/wave.svg' %}" class="wave" alt="wave" />
              </div>
              <div class="row gy-4">
                  {% for blog in blogs %}
                  	<div class="col-md-6">
                  <div class="post post-list-sm square">
                    <div class="thumb rounded">
                        <a href="/life/detail/{{ blog.id }}">
                            <div class="inner">
                                <img src="{{ blog.fm_image }}" alt="post-title" class="cover-image"/>
                            </div>
                        </a>
                    </div>
                    <div class="details clearfix">
                      <h6 class="post-title my-0">
                        {% if blog.category.wz_class == 1 %}
                            <a href="/life/detail/{{ blog.id }}">{{ blog.title }}</a></h6>
                        {% elif blog.category.wz_class == 2 %}
                        <a href="/inspiration/detail/{{ blog.id }}">{{ blog.title }}</a></h6>
                        {% elif blog.category.wz_class == 3 %}
                        <a href="/fashion/detail/{{ blog.id }}">{{ blog.title }}</a></h6>
                        {% elif blog.category.wz_class == 4 %}
                        <a href="/comment/detail/{{ blog.id }}">{{ blog.title }}</a></h6>
                        {% endif %}

                        <p class="text-muted">文章类型: {{ blog.category.get_wz_class_display }}</p>
                      <ul class="meta list-inline mt-1 mb-0">
                        <li class="list-inline-item">{{ blog.create_time }}</li>
                      </ul>
                    </div>
                  </div>
                </div>
                  {% endfor %}
              </div>
             <div class="pagination justify-content-center mt-4">
                <nav>
                    <ul class="pagination">
                        {% if blogs.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ blogs.previous_page_number }}">&laquo;</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">&laquo;</span>
                            </li>
                        {% endif %}

                        {% for num in blogs.paginator.page_range %}
                            {% if num == blogs.number %}
                                <li class="page-item active">
                                    <span class="page-link">{{ num }}</span>
                                </li>
                            {% else %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                </li>
                            {% endif %}
                        {% endfor %}

                        {% if blogs.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ blogs.next_page_number }}">&raquo;</a>
                            </li>
                        {% else %}
                            <li class="page-item disabled">
                                <span class="page-link">&raquo;</span>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>

            </div>
          </div>
        </div>
      </div>
    </section>
{% endblock %}


{% block js %}
	<script>
    function toggleSearchBox(event) {
      event.stopPropagation();
      const searchContainer = document.querySelector('.search-container');
      searchContainer.classList.toggle('active');
      if (searchContainer.classList.contains('active')) {
        setTimeout(() => {
          const input = searchContainer.querySelector('.form-control');
          if (input) input.focus();
        }, 100);
      }
    }

    document.addEventListener('click', function (event) {
      const searchContainer = document.querySelector('.search-container');
      if (!searchContainer.contains(event.target)) {
        searchContainer.classList.remove('active');
      }
    });
    function toggleUserMenu(event) {
      event.stopPropagation();
      const menu = document.getElementById('userMenu');
      menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
    }
    document.addEventListener('click', function (event) {
      const menu = document.getElementById('userMenu');
      const burgerButton = document.querySelector('.burger-menu');
      if (!menu.contains(event.target) && !burgerButton.contains(event.target)) {
        menu.style.display = 'none';
      }
    });
  </script>
{% endblock %}

{% block css %}
	<style>
    .user-menu {
      border-radius: 4px;
      margin-top: 10px;
    }

    .user-menu .dropdown-item,
    .user-menu .dropdown-item:hover,
    .user-menu .dropdown-item:active,
    .user-menu .dropdown-item:focus {
      box-sizing: border-box;
      width: 100%;
      padding: 8px 16px;
      border: none;
      font-weight: 400;
      outline: none;
      margin: 0;
      display: flex;
      align-items: center;
      transition: background-color 0.2s, color 0.2s;
    }

    .user-menu .dropdown-item:hover {
      background-color: #f8f9fa;
      color: #fe5e74;
    }

    .user-menu .text-danger,
    .user-menu .text-danger:hover,
    .user-menu .text-danger:active,
    .user-menu .text-danger:focus {
      color: #dc3545 !important;
      background: none;
      box-sizing: border-box;
      width: 100%;
      padding: 8px 16px;
      border: none;
      font-weight: 400;
      outline: none;
      margin: 0;
      display: flex;
      align-items: center;
    }

    .user-menu .text-danger:hover {
      background-color: #dc3545 !important;
      color: #fff !important;
    }

    .burger-menu {
      cursor: pointer;
    }

    .search-container {
      display: flex;
      align-items: center;
      position: relative;
    }

    .search-toggle {
      color: #fe5e74;
      background: none;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .search-toggle:hover {
      background: rgba(254, 94, 116, 0.08);
      color: #fe5e74;
    }

    .search-form {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
      padding: 0 8px 0 0;
      margin-left: 0;
      height: 40px;
      width: 0;
      overflow: hidden;
      transition: width 0.3s cubic-bezier(.4, 2, .6, 1);
      position: relative;
    }

    .search-container:not(.active) .search-form {
      width: 0;
      padding: 0;
      border: none;
    }

    .search-container.active .search-toggle {
      display: none;
    }

    .search-container.active .search-form {
      width: 260px;
      padding: 0 8px 0 0;
    }

    .search-form .form-control {
      border: none;
      outline: none;
      box-shadow: none;
      border-radius: 20px;
      padding: 8px 40px 8px 16px;
      font-size: 15px;
      background: transparent;
      flex: 1;
    }

    .search-form .search-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #fe5e74;
      font-size: 18px;
      padding: 0;
      cursor: pointer;
    }

    .search-form .search-btn:hover {
      color: #fe5e74;
    }

    .icon-button {
      cursor: pointer;
      padding: 8px;
      border: none;
      background: none;
      color: #fe5e74;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .icon-button:hover {
      background-color: rgba(254, 94, 116, 0.08);
      color: #fe5e74;
    }

    .burger-icon {
      display: block;
      width: 20px;
      height: 2px;
      background-color: currentColor;
      position: relative;
      transition: all 0.3s ease;
    }

    .burger-icon:before,
    .burger-icon:after {
      content: '';
      position: absolute;
      width: 20px;
      height: 2px;
      background-color: currentColor;
      transition: all 0.3s ease;
    }

    .burger-icon:before {
      top: -6px;
    }

    .burger-icon:after {
      bottom: -6px;
    }

    .icon-button:hover .burger-icon:before {
      transform: translateY(2px);
    }

    .icon-button:hover .burger-icon:after {
      transform: translateY(-2px);
    }

    .search-container .search.icon-button {
      display: flex;
    }

    .search-container.active .search.icon-button {
      display: none;
    }
    .cover-image {
        width: 100%;
        height: 100px; /* 统一高度 */
        object-fit: cover; /* 图片自动裁剪填充容器 */
        border-radius: 10px;
    }
  </style>
{% endblock %}



